<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Resource Priorities</title>
  <style>
   pre.idl { border:solid thin; background:#eee; color:#000; padding:0.5em }
   pre.idl :link, pre.idl :visited { color:inherit; background:transparent }
   pre code { color:inherit; background:transparent }
   div.example { margin-left:1em; padding-left:1em; border-left:double; color:#222; background:#fcfcfc }
   .note { margin-left:2em; font-weight:bold; font-style:italic; color:#008000 }
   p.note::before { content:"Note: " }
   .XXX { padding:.5em; border:solid #f00 }
   p.XXX::before { content:"Issue: " }
   dl.switch { padding-left:2em }
   dl.switch > dt { text-indent:-1.5em }
   dl.switch > dt:before { content:'\21AA'; padding:0 0.5em 0 0; display:inline-block; width:1em; text-align:right; line-height:0.5em }
   dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
   dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
   dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
   dl.domintro dd p { margin: 0.5em 0; }
   dl.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: red; border: solid 2px; background: white; padding: 0 0.25em; }
   em.ct { text-transform:lowercase; font-variant:small-caps; font-style:normal }
   dfn { font-weight:bold; font-style:normal }
   code { color:orangered }
   code :link, code :visited { color:inherit }
   hr:not(.top) { display:block; background:none; border:none; padding:0; margin:2em 0; height:auto }
   table { border-collapse:collapse; border-style:hidden hidden none hidden }
   table thead { border-bottom:solid }
   table tbody th:first-child { border-left:solid }
   table td, table th { border-left:solid; border-right:solid; border-bottom:solid thin; vertical-align:top; padding:0.2em }
   .auto-style1 { background-color: #FFFFFF;}
   .ednote { border-top: 3px solid red; border-bottom: 3px solid red; margin: 1em 2em; padding: 0 1em 0 1em; background: #f8eeee }
   .ednoteHeader { font-weight: bold; display: block; padding-top: 0.5em }
   .element {background: #F4F4FA; color: black; margin: 0 0 1em 0.15em; padding: 0 1em 0.25em 0.75em; border-left: solid #9999FF 0.25em; position: relative; z-index: 1; }
  </style>
  <link href="https://www.w3.org/StyleSheets/TR/W3C-ED.css" rel="stylesheet" type="text/css">
</head>
<body class="draft">

<div class="head">

<div style='background: yellow; color: black; width: 100%; text-align: center; padding: 1ex; font-weight: bold;position: fixed; top: 1%; left: 0;'>
This specification is no longer maintained and has been abandonned. Folks should look at <a href='http://w3c.github.io/resource-hints/'>resource hints</a> instead.
</div>

<h1>Resource Priorities</h1>

<h2 class="no-num no-toc" id="editors-draft-March-19-2014">Editor's Draft April 16, 2014</h2>
<dl>

  <dt>Latest Editor's Draft:</dt>
    <dd><a
      href="https://w3c.github.io/web-performance/specs/ResourcePriorities/Overview.html">https://w3c.github.io/web-performance/specs/ResourcePriorities/Overview.html</a></dd>
  <dt>Latest published version:</dt>
    <dd><a
      href="http://www.w3.org/TR/resource-priorities/">http://www.w3.org/TR/resource-priorities/</a></dd>

  <dt>Editors:</dt>
    <dd class="vcard"><span class="fn">Tobin Titus</span>, <span
      class="org">Microsoft Corp.</span>, &lt;<a
      class="email" href="mailto:tobint@microsoft.com">tobint@microsoft.com</a>&gt; </dd>
	  <dd class="vcard"><span class="fn">James Simonsen</span>, <span
      class="org">Google Inc.</span>, &lt;<a
      class="email" href="mailto:simonjam@google.com">simonjam@google.com</a>&gt; </dd>
    <dd class="vcard"><span class="fn">Jatinder Mann</span>, <span
      class="org">Microsoft Corp.</span>, &lt;<a
      class="email" href="mailto:jmann@microsoft.com">jmann@microsoft.com</a>&gt;
      <i>(Until February 2014)</i> </dd>
</dl>

    <p class=copyright><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
    &copy; 2013 <a href="http://www.w3.org/"><abbr title="World Wide
    Web Consortium">W3C</abbr></a><sup>&reg;</sup>
    (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts
    Institute of
    Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European
    Research Consortium for Informatics and
    Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>),
    All Rights
    Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>

    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>

   <hr class='top'>
</div>

<h2 class="no-num no-toc" id="abstract">Abstract</h2>

<p>
    This specification defines a means for site developers to programmatically give the User Agent
    hints on the download priority of a resource. This will allow User Agents to more efficiently
    manage the order in which resources are downloaded.
</p>

<h2 class="no-num no-toc" id="status-of-this-document">Status of this
document</h2>

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index</a> at http://www.w3.org/TR/.</em></p>

<p>This is an <strong>editor's draft</strong> and may change without any
notices. </p>

<p>Please send comments
   to <a href="mailto:public-web-perf@w3.org?subject=%5BResourcePriorities%5D%20">public-web-perf@w3.org</a>
   (<a href="http://lists.w3.org/Archives/Public/public-web-perf/">archived</a>)
   with <samp>[ResourcePriorities]</samp> at the start of the subject line.</p>

<p>This document is produced by
   the <a href="http://www.w3.org/2010/webperf/">Web Performance Working Group</a>.</p>


<h2 class="no-num no-toc" id="table-of-contents">Table of Contents</h2>
<!--begin-toc-->
<ol class="toc">
  <li><a href="#introduction"><span class="secno">1 </span>Introduction</a>
    <ol class="toc">
	  <li><a href="#intro-executing-scripts"><span class="secno">1.1 </span> Executing scripts sooner</a></li>
	  <li><a href="#intro-download-priority"><span class="secno">1.2 </span> Optimizing download priority during network contention</a></li>
	  <li><a href="#intro-proactively-loading"><span class="secno">1.3 </span> Proactively loading resources</a></li>
    </ol>
  </li>
  <li><a href="#conformance-requirements"><span class="secno">2 </span>Conformance requirements</a></li>
  <li><a href="#terminology"><span class="secno">3 </span>Terminology</a></li>
  <li><a href="#sec-resource-priorities"><span class="secno">4 </span>Resource Priorities</a>
    <ol class="toc">
		<li><a href="#sec-resource-priorities-introduction"><span class="secno">4.1 </span>Introduction</a></li>
		<li><a href="#attr-lazyload"><span class="secno">4.2 </span>The <code>lazyload</code> attribute</a></li>
		<li><a href="#the-elements"><span class="secno">4.3 </span> Elements capable of downloading resources</a>
        <ol class="toc">
		    <li><a href="#the-img-element"><span class="secno">4.3.1 </span> The <code>img</code> element</a></li>
		    <li><a href="#the-audio-element"><span class="secno">4.3.2 </span> The <code>audio</code> element</a></li>
		    <li><a href="#the-video-element"><span class="secno">4.3.3 </span> The <code>video</code> element</a></li>
		    <li><a href="#the-script-element"><span class="secno">4.3.4 </span> The <code>script</code> element</a></li>
		    <li><a href="#the-link-element"><span class="secno">4.3.5</span> The <code>link</code> element</a></li>
		    <li><a href="#the-embed-element"><span class="secno">4.3.6 </span> The <code>embed</code> element</a></li>
		    <li><a href="#the-iframe-element"><span class="secno">4.3.7 </span> The <code>iframe</code> element</a></li>
		    <li><a href="#the-object-element"><span class="secno">4.3.8 </span> The <code>object</code> element</a></li>
			  <li><a href="#the-svg-feImage"><span class="secno">4.3.9 </span> The <code>svg feImage</code> filter primitive</a></li>
			  <li><a href="#the-svg-image"><span class="secno">4.3.10 </span> The <code>svg image</code> element</a></li>
			  <li><a href="#the-svg-use"><span class="secno">4.3.11 </span> The <code>svg use</code> element</a></li>
			  <li><a href="#the-svg-script"><span class="secno">4.3.12 </span> The <code>svg script</code> element</a></li>
			  <li><a href="#the-svg-tref"><span class="secno">4.3.13 </span> The <code>svg tref</code> element</a></li>
        </ol>
	</li>
		<li><a href="#sec-events"><span class="secno">4.4 </span>The Events</a>
		<ol class="toc">
			<li><a href="#sec-load-event"><span class="secno">4.4.1 </span>The <code>load</code> event</a></li>
			<li><a href="#sec-lazyloaded-event"><span class="secno">4.4.2 </span>The <code>lazyloaded</code> event</a></li>
		</ol>
		</li>
    </ol>
  </li>
  <li><a href="#references"><span class="secno">5 </span>References</a></li>
  <li><a class="no-num" href="#acknowledgements">Acknowledgements</a></li>
</ol>
<!--end-toc-->

<h2 id="introduction"><span class="secno">1 </span>Introduction</h2>

<p>This section is non-normative.</p>

<p>
    The Resource Priorities specification defines a means for site developers to programmatically give
    the User Agent hints on the download priority of a resource. Without knowing the download priority of
    a resource, the User Agent will typically download resources in document order. However, the download
    order may not be best optimized for improving both the perceived and real page load performance.
	By specifying lower priority resources using the <a href="#attr-lazyload"><code>lazyload</code></a> attribute,
	the User Agent is able to better optimize download order when the User Agent is in a resource constrained
	environment and sooner execute scripts triggered by the load event of the Document.
</p>

<h3 id="intro-executing-scripts"><span class="secno">1.1 </span> Executing scripts sooner</h3>
<p>
	Today, most developers trigger script execution based on the load event of the Document. However,
	the load event can be delayed by resources that are not necessary for page load visuals and do not interact
	with script. For example, a site may have images well below the fold that are delaying
	how long it takes the load event of the document to fire, delaying scripts from executing. Specifying
	the <code>lazyload</code> attribute on an element downloading a resource allows the User Agent to not block
	the load event of the Document on those resources. By specifying the <code>lazyload</code> attribute on
	resources that have no interaction with script or are not necessary	for above the fold visuals,
	scripts can execute sooner, improving real world page load performance.
</p>

<h3 id="intro-download-priority"><span class="secno">1.2 </span> Optimizing download priority during network contention</h3>
<p>
    Site developers can improve the perception of page load performance by
    optimizing the download of resources when there is network resource contention such that downloads for resources
	not required to create the above the fold visuals are prioritized lower.
	However, determining which resources are required to create the above the fold visuals for a web page
    is something the User Agent cannot easily determine on its own. Instead, the site developer is in the
    best position to let the User Agent know the relative priorities of resources on their web application.
</p>
<div class="example">
    <p>
        The following example shows a theoretical web page that doesn't specify the download priority of resources.
        In this example, the site developer will use Stylesheets from Styles.css and script within Visuals.js
        to re-layout the page such that Logo.png, Header.png, and MainContent.mp4 will be shown above the fold,
        whereas AdditionalImages1.png and AdditionalImages2.png will be shown below the fold. Animations.css is used
        to display an animation when a user clicks on an image and Analytics.js is used to collect analytics information,
		both not executed during the page load.
    </p>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
     &lt;link rel="stylesheet" type="text/css" src="Styles.css" /&gt;
     &lt;link rel="stylesheet" type="text/css" src="Animations.css" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
    &lt;img id="Logo" src=".../images/Logo.png"/&gt;
    &lt;img id="Header" src=".../images/Header.png"/&gt;
    &lt;img id="AdditionalImages1" src=".../images/AdditionalImages1.png"/&gt;
    &lt;img id="AdditionalImages2" src=".../images/AdditionalImages2.png"/&gt;
    &lt;video id="MainContent"&gt;&lt;source src=".../videos/MainContent.mp4"&gt;&lt;/video&gt;
    &lt;script src="Visuals.js" &gt;&lt;/script&gt;
    &lt;script src="Analytics.js" &gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>
    As the example page has been specified, a User Agent may download resources in the following order: root document,
    CSS in document order, JavaScript in document order, and everything else in document order. In this case,
    AdditionalImages1.png and AddtionalImages.png will be downloaded before MainContent.mp4, even though they will not
    be displayed above the fold when the page loads. Additionally, Animations.css and Analytics.js will be downloaded
    prior to the visual aspect of the page, even though they won't be used in the page load sequence.
</p>

<p>
    Using the <a href="#attr-lazyload"><code>lazyload</code></a> attribute on a resource will signal to the User Agent that
    in cases of network resource contention, it may lower the download priority of that resource.
</p>

<div class="example">
<p>
    The following example shows the same theoretical web page but with the <code>lazyload</code> attribute set for
    resources whose download priority can be reduced, as they do not impact the visual appearance of the page
    above the fold.
</p>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
     &lt;link rel="stylesheet" type="text/css" src="Styles.css" /&gt;
     &lt;link rel="stylesheet" type="text/css" src="Animations.css" lazyload /&gt;
 &lt;/head&gt;
 &lt;body&gt;
    &lt;img id="Logo" src=".../images/Logo.png"/&gt;
    &lt;img id="Header" src=".../images/Header.png"/&gt;
    &lt;img id="AdditionalImages1" src=".../images/AdditionalImages1.png" lazyload /&gt;
    &lt;img id="AdditionalImages2" src=".../images/AdditionalImages2.png" lazyload /&gt;
    &lt;video id="MainContent"&gt;&lt;source src=".../videos/MainContent.mp4"&gt;&lt;/video&gt;
    &lt;script src="Visuals.js" &gt;&lt;/script&gt;
    &lt;script src="Analytics.js" lazyload &gt;&lt;/script &gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>
    In this example page, using the <a href="#attr-lazyload"><code>lazyload</code></a> attribute
    User Agent may instead download resources in the following order: root document,
    Styles.css, Visuals.js, Logo.png, Header.png, MainContent.mp4, Animations.css, Analytics.js, AdditionalImages1.png
    and AdditionalImages2.png.
</p>

<h3 id="intro-proactively-loading"><span class="secno">1.3 </span> Proactively loading resources</h3>

<p>
	Some applications require a large number of resources that may not be required immediately. For example,
	a Canvas game may have multiple game levels with different assets required for each level.
	Instead of slowing down the initial application loading experience by loading all assets during the
	page load, developers can use the <code>lazyload</code>	attribute on resources that they do not need immediately.
	These resources won't block script execution, as the load event of the Document will not be delayed, and in cases
	of network resource contention, the User Agent will optimize downloading the higher priority resources.
</p>

<div class="example">
<p>
    The following example shows a theoretical game application that is using <code>lazyload</code> to differentiate
	between assets that are required more immediately and assets that are not required immediately.
</p>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;/head&gt;
 &lt;body onload='init()'&gt;
 &lt;canvas id='GameCanvas'&gt;&lt;/canvas&gt;
 &lt;img class='Backgrounds' id='BackgroundLevel1' src='Background1.png' /&gt;
 &lt;img class='Backgrounds' id='BackgroundLevel2' src='Background2.png' lazyload /&gt;
   &lt;script&gt;
    var assets = [];
    var NUM_ASSETS_LEVEL1 = 100;
    var NUM_ASSETS_LEVEL2 = 100;
    var NUM_ASSETS_GENERAL = 100;
    var URL_LEVEL1_ASSETS = "assets\\level1\\";
    var URL_LEVEL2_ASSETS = "assets\\level2\\";
    var URL_GENERAL_ASSETS = "assets\\general\\";

   function init() {
      // Load game assets
      loadGameAssets();

      // Play game
   }

   function loadGameAssets() {
      var i, j, k;

      // Load assets required for Level 1
      for (i = 0; i &lt; NUM_ASSETS_LEVEL1; i++) {
         assets[i] = new Image();
         assets[i].src = URL_LEVEL1_ASSETS + i + ".png";
      }

      // Lazyload assets required for Level 2
      for (j = 0; j &lt; NUM_ASSETS_LEVEL2; j++) {
         assets[i + j] = new Image();
         assets[i + j].setAttribute('lazyload');
         assets[i + j].src = URL_LEVEL2_ASSETS + j + ".png";
      }

      // Load additional assets required for all levels
      for (k = 0; k &lt; NUM_ASSETS_GENERAL; k++) {
         assets[i + j + k] = new Image();
         assets[i + j + k].src = URL_GENERAL_ASSETS + k + ".png";
      }
   }
  &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>
</div>

<p>
	In the previous example, downloading the Background2.png specified in markup does not block the load event of the page
	as it has been marked with <code>lazyload</code>. Similarly, for the dynamically loaded resources,
	if there had been a network resource contention, the User Agent would have prioritized the downloads for level 1
	and general assets over level 2 assets.
</p>


<h2 id="conformance-requirements"><span class="secno">2 </span>Conformance
requirements</h2>

<p>All diagrams, examples, and notes in this specification are non-normative,
as are all sections explicitly marked non-normative. Everything else in this
specification is normative. </p>

<p>The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT",
"RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document
are to be interpreted as described in <a href="#rfc2119">RFC 2119</a>.
For readability, these words do not appear in all uppercase letters in this specification.</p>

<p>Requirements phrased in the imperative as part of algorithms (such as
"strip any leading space characters" or "return false and abort these steps")
are to be interpreted with the meaning of the key word ("must", "should",
"may", etc) used in introducing the algorithm. </p>

<p>Some conformance requirements are phrased as requirements on attributes,
methods or objects. Such requirements are to be interpreted as requirements
on user agents. </p>

<p>Conformance requirements phrased as algorithms or specific steps may be
implemented in any manner, so long as the end result is equivalent. (In
particular, the algorithms defined in this specification are intended to be
easy to follow, and not intended to be performant.) </p>

    <p>The IDL fragments in this specification must be interpreted as
    required for conforming IDL fragments, as described in the Web IDL
    specification. <a href="#WebIDL">[Web IDL]</a></p>

<h2 id="terminology"><span class="secno">3 </span>Terminology</h2>

<p>The construction "a <code title="">Foo</code> object", where <code
title="">Foo</code> is actually an interface, is sometimes used instead of
the more accurate "an object implementing the interface <code
title="">Foo</code>". </p>


<p>
    <dfn id="network-resource-contention">Network resource contention</dfn> is defined as when the User Agent determines there is
    a conflict over access to network resources. An example of network resource contention is when a User Agent is unable to start downloading a resource because the User Agent has exhausted all available TCP connections.
</p>

<h2 id="sec-resource-priorities"><span class="secno">4 <span class="auto-style1">Resource Priorities</span></span></h2>

<h3 id="sec-resource-priorities-introduction"><span class="secno">4.1 </span>Introduction</h3>

<p>This section is non-normative.</p>

<p>
    This specification defines a means for site developers to programmatically give the User Agent
    hints on the download priority of a resource. This will allow User Agents to more efficiently
    manage the order in which resources are downloaded when there is <a href="#network-resource-contention">
    network resource contention</a> or when the resource is not visible to the user, and allow the load event of the Document
	to fire sooner as it will not be blocked for lower priority resources.
</p>

<h3 id="the-lazyload-attribute"><span class="secno">4.2 </span>The <code>lazyload</code> attribute</h3>

<p>
	The <dfn id="attr-lazyload"><code>lazyload</code></dfn> attribute is a boolean and IDL attribute
	that indicates the priority order in which the User Agent should download the resource associated with
	the element in cases of <a href="#network-resource-contention">network resource contention</a>.
</p>
<p>
    If the User Agent determines that there is <a href="#network-resource-contention">network resource contention</a>,
	the User Agent SHOULD delay downloading resources associated with elements that have the <a href="#attr-lazyload"><code>lazyload</code></a>
	<a href="http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute">boolean attribute</a> specified on the
	element until all other resources associated with elements that do not have the <a href="#attr-lazyload"><code>lazyload</code></a>
	<a href="http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute">boolean attribute</a> specified on the
	element have started downloading.
</p>
<div class="note">
<div class="noteHeader">Note</div>
<p>
	An example of network resource contention can be if there is a connection contention where the User
	Agent is using all available connections. A User Agent may give available TCP connections,
	or give a more optimized TCP connection if there is a choice between available connections,
	to resources that don’t have the <code>lazyload</code> attribute.
</p>
</div>
<p>
    The <dfn id="dom-lazyload"><code>lazyload</code></dfn> IDL attribute MUST
	<a href="http://www.w3.org/TR/html5/infrastructure.html#reflect">reflect</a> the
	<a href="#attr-lazyload"><code>lazyload</code></a> boolean attribute value.
</p>
<p>
    The <a href="#attr-lazyload"><code>lazyload</code></a> boolean and IDL attributes are supported
	on the following <a href="http://www.w3.org/TR/html5/infrastructure.html#html-elements">HTML elements</a>
	and <a href="http://www.w3.org/TR/SVG/intro.html#TermSVGDocumentFragment">SVG elements</a>
   capable of <a href="http://www.w3.org/TR/html5/infrastructure.html#fetch">fetching</a> resources:
	<code><a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element">img</a></code>,
	<code><a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-audio-element">audio</a></code>,
	<code><a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-video-element">video</a></code>,
	<code><a href="http://www.w3.org/TR/html5/scripting-1.html#the-script-element">script</a></code>,
	<code><a href="http://www.w3.org/TR/html5/document-metadata.html#the-link-element">link</a></code>,
    <code><a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-embed-element">embed</a></code>,
	<code><a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element">iframe</a></code>,
	<code><a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-object-element">object</a></code>,
	<code>svg</code> <code><a href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></code>,
	<code>svg</code> <code><a href="http://www.w3.org/TR/SVG/struct.html#ImageElement">image</a></code>,
	<code>svg</code> <code><a href="http://www.w3.org/TR/SVG/struct.html#UseElement">use</a></code>,
	<code>svg</code> <code><a href="http://www.w3.org/TR/SVG/script.html#ScriptElement">script</a></code>,
	and <code>svg</code> <code><a href="http://www.w3.org/TR/SVG/text.html#TRefElement">tref</a></code>.
</p>

</dl>

<h3 id="the-elements"><span class="secno">4.3 </span>Elements capable of downloading resources</h3>

<h4 id="the-img-element"><span class="secno">4.3.1 </span>The <dfn id="img"><code>img</code></dfn> element</h4>

  <dl class="element">

   <dt>Content attributes:</dt>
   <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="htmlimagelement">HTMLImageElement</dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>

<p>
    The <a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element"><code>img</code></a> element supports the <a href="#attr-lazyload"><code>lazyload</code></a> attribute.
</p>

<h4 id="the-audio-element"><span class="secno">4.3.2 </span>The <dfn id="audio"><code>audio</code></dfn> element</h4>
  <dl class="element">

   <dt>Content attributes:</dt>
   <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="htmlaudioelement">HTMLAudioElement</dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>

<p>
	The <a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-audio-element"><code>audio</code></a> element supports the <a href="#attr-lazyload"><code>lazyload</code></a> attribute.
</p>

<h4 id="the-video-element"><span class="secno">4.3.3 </span>The <dfn id="video"><code>video</code></dfn> element</h4>

  <dl class="element">

   <dt>Content attributes:</dt>
        <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="htmlvideoelement">HTMLVideoElement</dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>

<p>
    The <a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-video-element"><code>video</code></a> element supports the <a href="#attr-lazyload"><code>lazyload</code></a> attribute.
</p>

<h4 id="the-script-element"><span class="secno">4.3.4 </span>The <dfn id="script"><code>script</code></dfn> element</h4>

  <dl class="element">

   <dt>Content attributes:</dt>
        <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="htmlscriptelement">HTMLScriptElement</dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>
  <p>
	The <a href="http://www.w3.org/TR/html5/scripting-1.html#the-script-element"><code>script</code></a> element supports the <a href="#attr-lazyload"><code>lazyload</code></a> boolean attribute, along with the <a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#attr-script-defer"><code>defer</code></a>
	and	<a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#attr-script-async"><code>async</code></a> boolean attributes, to indicate the order in which the user agent will download and execute the script.
 </p>

 <p>
	There are a few possible modes that can be selected using these attributes:
 </p>

 <ul>
 <li><p>
	If the <a href="#attr-lazyload"><code>lazyload</code></a> and <a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#attr-script-async"><code>async</code></a> attributes
	are present, if there is network resource contention the User Agent SHOULD delay downloading the script until after all other
	<a href="http://www.w3.org/TR/html5/infrastructure.html#html-elements">elements</a>
    without the <a href="#attr-lazyload"><code>lazyload</code></a> attribute that will be
    <a href="http://www.w3.org/TR/html5/infrastructure.html#fetch">fetching</a> a resource
    have started downloading, and then the script MUST be executed asynchronously, as soon as it is available.
</p></li>

<li><p>
	If the <a href="#attr-lazyload"><code>lazyload</code></a> and <a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#attr-script-defer"><code>defer</code></a> attributes
	are present, the <a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#attr-script-defer"><code>defer</code></a> attribute behavior takes precedence and the <a href="#attr-lazyload"><code>lazyload</code></a>
	attribute will have no effect.
</p></li>

<li><p>
	If only the <a href="#attr-lazyload"><code>lazyload</code></a> attribute is present,
	the User Agent MUST run the same steps as if both the <a href="#attr-lazyload"><code>lazyload</code></a>
	and <a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#attr-script-async"><code>async</code></a> attributes
	were present.
</p></li>


<li><p>
	If the <a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#attr-script-async"><code>async</code></a>
	IDL attribute of the <code>script</code> element is set to <code>false</code>, the <a href="#attr-lazyload"><code>lazyload</code></a>
	attribute will have no effect.
</p></li>
</ul>

 <h4 id="the-link-element"><span class="secno">4.3.5 </span>The <dfn id="link"><code>link</code></dfn> element</h4>

  <dl class="element">

   <dt>Content attributes:</dt>
        <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="htmllinkelement">HTMLLinkElement</dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>

<p>
    The <a href="http://www.w3.org/TR/html5/document-metadata.html#the-link-element"><code>link</code></a> element supports the <a href="#attr-lazyload"><code>lazyload</code></a> attributes.
</p>

<p>
	The User Agent MUST NOT block rendering on stylesheets that have the
	<a href="#attr-lazyload"><code>lazyload</code></a> boolean attribute specified on the associated <code>link</code> element or
	the <a href="#attr-lazyload"><code>lazyload</code></a> IDL attribute set to true on the associated <code>link</code> element.
</p>

<p>
	The User Agent parser MUST NOT block launching new script contexts on stylesheets that have the
	<a href="#attr-lazyload"><code>lazyload</code></a> boolean attribute specified on the associated <code>link</code> element or
	the <a href="#attr-lazyload"><code>lazyload</code></a> IDL attribute set to true on the associated <code>link</code> element.
</p>


<h4 id="the-embed-element"><span class="secno">4.3.6 </span>The <dfn id="embed"><code>embed</code></dfn> element</h4>

  <dl class="element">

   <dt>Content attributes:</dt>
        <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="htmlembedelement">HTMLEmbedElement</dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>

<p>
    The <a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-embed-element"><code>embed</code></a>
	 element supports the <a href="#attr-lazyload"><code>lazyload</code></a> attribute.
</p>

 <h4 id="the-iframe-element"><span class="secno">4.3.7 </span>The <dfn id="iframe"><code>iframe</code></dfn> element</h4>

  <dl class="element">

   <dt>Content attributes:</dt>
       <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="htmliframeelement">HTMLIFrameElement</dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>

<p>
    The <a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element"><code>iframe</code></a> element supports the <a href="#attr-lazyload"><code>lazyload</code></a> attribute.
</p>

<h4 id="the-object-element"><span class="secno">4.3.8 </span>The <dfn id="object"><code>object</code></dfn> element</h4>

  <dl class="element">

   <dt>Content attributes:</dt>
       <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="htmlobjectelement">HTMLObjectElement</dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>

<p>
    The <a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-object-element"><code>object</code></a> element supports the <a href="#attr-lazyload"><code>lazyload</code></a> attribute.
</p>

<h4 id="the-svg-feImage"><span class="secno">4.3.9 </span>The <code>svg</code> <dfn id="svg-feImage"><code>feImage</code></dfn> filter primitive</h4>

  <dl class="element">

   <dt>Content attributes:</dt>
   <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="svgfeimageelement">SVGFEImageElement</dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>

<p>
    The <a href="http://www.w3.org/TR/SVG11/filters.html#feImageElement"><code>svg feImage</code></a> primitive supports the <a href="#attr-lazyload"><code>lazyload</code></a> attribute.
	If the <a href="http://www.w3.org/TR/SVG11/struct.html#ExternalResourcesRequiredAttribute"><code>externalResourcesRequired</code></a> attribute is set to true, the
	<a href="#attr-lazyload"><code>lazyload</code></a> attribute will have no effect.
</p>

<h4 id="the-svg-image"><span class="secno">4.3.10 </span>The <code>svg</code> <dfn id="svg-image"><code>image</code></dfn> element</h4>

  <dl class="element">

   <dt>Content attributes:</dt>
   <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="SVGImageElement">SVGImageElement </dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>

<p>
    The <a href="http://www.w3.org/TR/SVG/struct.html#ImageElement"><code>svg image</code></a> element supports the <a href="#attr-lazyload"><code>lazyload</code></a> attribute.
</p>

<h4 id="the-svg-use"><span class="secno">4.3.11 </span>The <code>svg</code> <dfn id="svg"><code>use</code></dfn> element</h4>

  <dl class="element">

   <dt>Content attributes:</dt>
   <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="SVGUseElement">SVGUseElement</dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>

<p>
    The <a href="http://www.w3.org/TR/SVG/struct.html#UseElement"><code>svg use</code></a> element supports the <a href="#attr-lazyload"><code>lazyload</code></a> attribute.
</p>

<h4 id="the-svg-script"><span class="secno">4.3.12 </span>The <code>svg</code> <dfn id="svg-script"><code>script</code></dfn> element</h4>

  <dl class="element">

   <dt>Content attributes:</dt>
   <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="SVGScriptElement">SVGScriptElement</dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>

<p>
    The <a href="http://www.w3.org/TR/SVG/script.html#ScriptElement"><code>svg script</code></a> element supports the <a href="#attr-lazyload"><code>lazyload</code></a> attribute.
</p>

<h4 id="the-svg-tref"><span class="secno">4.3.13 </span>The <code>svg</code> <dfn id="svg-tref"><code>tref</code></dfn> element</h4>

  <dl class="element">

   <dt>Content attributes:</dt>
   <dd><code><a href="#attr-lazyload">lazyload</a></code></dd>
   <dt>DOM interface:</dt>
   <dd>
<pre class="idl">
partial interface <dfn id="SVGTRefElement">SVGTRefElement</dfn> {
     attribute boolean <a href="#dom-lazyload">lazyload</a>;
};</pre>
   </dd>
  </dl>

<p>
    The <a href="http://www.w3.org/TR/SVG/text.html#TRefElement"><code>svg tref</code></a> element supports the <a href="#attr-lazyload"><code>lazyload</code></a> attribute.
</p>

<h3 id="sec-events"><span class="secno">4.4 </span>Events</h3>

<h4 id="sec-load-event"><span class="secno">4.4.1 </span>The <code>load</code> event</h4>
<p>
	The <code>load</code> event of the Document MUST NOT be blocked by any <a href="http://www.w3.org/TR/html5/infrastructure.html#html-elements">element</a>
	with the <a href="#attr-lazyload"><code>lazyload</code></a> content attribute specified or the <a href="#attr-lazyload"><code>lazyload</code></a> IDL attribute set to true.
	The <code>load</code> event of an <a href="http://www.w3.org/TR/html5/infrastructure.html#html-elements">element</a> with
	the <a href="#attr-lazyload"><code>lazyload</code></a> attribute MUST continue to be blocked until the resource is loaded.
</p>

<p>
	The <a href="#attr-lazyload"><code>lazyload</code></a> attribute MUST not change when the <code>DOMContentLoaded</code> event is fired or the behavior of the
  <code>loading</code>, <code>interactive</code>, and <code>complete</code> states of the Document's
  <code><a href="http://www.w3.org/TR/html5/dom.html#dom-document-readystate">readyState</a></code>	IDL attribute.
</p>

<h4 id="sec-lazyloaded-event"><span class="secno">4.4.2 </span>The <code>lazyloaded</code> event</h4>

<p>
	Immediately after all <a href="http://www.w3.org/TR/html5/infrastructure.html#html-elements">elements</a> with the <a href="#attr-lazyload"><code>lazyload</code></a> content attribute
	specified or <a href="#attr-lazyload"><code>lazyload</code></a> IDL attribute set to true have their resources downloaded, the User Agent MUST queue a task to fire a simple
	event <code><a href="#sec-lazyloaded-event">lazyloaded</a></code> at the Document. If there are no <a href="http://www.w3.org/TR/html5/infrastructure.html#html-elements">elements</a> with the
	<a href="#attr-lazyload"><code>lazyload</code></a> content attribute specified or with the <a href="#attr-lazyload"><code>lazyload</code></a> IDL attribute set to true,
	the User Agent MUST queue a task to fire the <code><a href="#sec-lazyloaded-event">lazyloaded</a></code> event at the Document immediately after the <code>load</code> event of the Document has been fired.
</p>


<h2 id="references"><span class="secno">5 </span>References</h2>

<dl>

   <dt id="rfc2119">[IETF RFC 2119]</dt>
   <dd>
    <cite><a href="http://www.ietf.org/rfc/rfc2119.txt">Key words for use in RFCs to Indicate Requirement Levels</a></cite>,
    Scott Bradner, Author. Internet Engineering Task Force, March 1997. Available at
    <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>.
   </dd>

   <dt id="HTML5">[HTML5]</dt>
   <dd><cite><a href='http://www.w3.org/TR/html5/'>HTML5</a></cite>, Robin Berjon, et al, Editors. World Wide Web Consortium, August 2013. This version of the HTML5 is available from <a href='http://www.w3.org/TR/html5/'>http://www.w3.org/TR/html5/</a>. The <a href='http://www.w3.org/html/wg/drafts/html/master/'>latest editor's draft</a> of HTML is available at http://www.w3.org/html/wg/drafts/html/master/.</dd>

   <dt>[<a id="WebIDL">Web IDL</a>]</dt>
   <dd><cite><a href='http://www.w3.org/TR/2012/CR-WebIDL-20120419/'>Web IDL</a></cite>, Cameron McCormack, Editor. World Wide Web Consortium, April 2012. This version of the Web IDL specification is available from http://www.w3.org/TR/2012/CR-WebIDL-20120419/. The <a href='http://www.w3.org/TR/WebIDL/'>latest version of Web IDL</a> is available at http://www.w3.org/TR/WebIDL/.</dd>

   <dt>[<a id="CSS">CSS</a>]</dt>
   <dd><cite><a href='http://www.w3.org/TR/2011/REC-CSS2-20110607/'>CSS 2.1</a></cite>, Bert Box, et al, Editors. World Wide Web Consortium, June 2011. This version of the CSS 2.1 specification is available from http://www.w3.org/TR/2011/REC-CSS2-20110607/. The <a href='http://www.w3.org/TR/CSS2/'>latest version of CSS 2.1</a> is available at http://www.w3.org/TR/CSS2/.</dd>

   <dt>[<a id="SVG">SVG</a>]</dt>
   <dd><cite><a href='http://www.w3.org/TR/2011/REC-SVG11-20110816/'>SVG 1.1</a></cite>, Erik Dahlström, et al, Editors. World Wide Web Consortium, August 2011. This version of the SVG 1.1 specification is available from http://www.w3.org/TR/2011/REC-SVG11-20110816/. The <a href='http://www.w3.org/TR/SVG11/'>latest version of SVG 1.1</a> is available at http://www.w3.org/TR/SVG/.</dd>
</dl>

<h2 id="acknowledgements">Acknowledgements</h2>

<p>
    We would like to sincerely thank Bruno Racineux, Jake Archibald, Jason Weber, Josh Tumath, Tony Ross, Travis Leithead,
	Yoav Weiss, Marcos Caceres, Brian Birtles, Ivan Kotenkov, Erik Dahlstrom, Boris Zbarsky, William Chan, and Shwetank Dixit
    to acknowledge their contributions to this work.
</p>

</body>
</html>
